<template>
	<el-container>
		<el-aside width="45%">
			<el-container>
                <el-header>
					<div class="left-panel">第一步、单击行选择商品</div>
				</el-header>
                <el-header>
					<div class="right-panel-search">
						<div class="search-input">商品类别</div>
                        <el-input v-model="input3" class="input-with-select" readonly style="width:150px">
                            <template #append>
                                <el-button icon="el-icon-MoreFilled"></el-button>
                            </template>
                        </el-input>
						<el-input v-model="search.keyword" class="search-input" placeholder="供应商编号/名称/联系人/手机号" clearable></el-input>
                        <el-select v-model="search.keyword" filterable placeholder="结算方式">
                            <el-option v-for="item in settlementList" :key="item.id" :label="item.title" :value="item.id" />
                        </el-select>
						<el-button type="primary" @click="upsearch">查询</el-button>
					</div>
				</el-header>
				<el-header>
					<div class="left-panel">
						<el-button type="primary">批量为商品添加物料和工序<el-icon class="el-icon--right"><el-icon-CaretBottom /></el-icon></el-button>
					</div>
				</el-header>
				<el-main class="nopadding">
					<scTable ref="table" :apiObj="list.apiObj" row-key="id" stripe highlightCurrentRow @row-click="rowClick">
						<el-table-column type="selection"></el-table-column>
						<el-table-column label="商品编号" prop="id"></el-table-column>
						<el-table-column label="商品名称" prop="num"></el-table-column>
						<el-table-column label="规格型号" prop="progress"></el-table-column>
						<el-table-column label="物料清单" prop="datetime"></el-table-column>
						<el-table-column label="生成工序" prop="datetime"></el-table-column>
						<el-table-column label="状态" prop="datetime"></el-table-column>
						<el-table-column label="品牌" prop="datetime"></el-table-column>
						<el-table-column label="条形码" prop="datetime"></el-table-column>
						<el-table-column label="类别" prop="datetime"></el-table-column>
					</scTable>
				</el-main>
			</el-container>
		</el-aside>
		<el-container>
			 <el-header>
					<div class="left-panel">第二步、为选中的商品设置物料及工序</div>
			</el-header>
            <el-header>
                <div class="right-panel-search">
                    <div class="search-input">商品编号</div>
                    <el-input v-model="search.keyword" class="search-input" clearable></el-input>
                    <div class="search-input">商品名称</div>
                    <el-input v-model="search.keyword" class="search-input" clearable></el-input>
                    <div class="search-input">所需费用(¥)</div>
                    <el-input v-model="search.keyword" class="search-input" clearable></el-input>
                </div>
            </el-header>
			<el-main class="nopadding">
                <el-tabs tab-position="top">
                    <el-tab-pane label="1.所需物料">
                        <el-header>
                            <div>
                                <el-button type="primary">添加物料<el-icon class="el-icon--right"><el-icon-CaretBottom /></el-icon></el-button>
                                <el-button type="primary">复制<el-icon class="el-icon--right"><el-icon-CaretBottom /></el-icon></el-button>
                                <el-button type="warning">删除</el-button>
                                <el-button type="primary">导入</el-button>
                                <el-button type="primary">导出</el-button>
                            </div>
                        </el-header>
                        <el-main>
                            <scTable ref="sontable" :apiObj="list.apiObj" row-key="id" stripe>
                            <el-table-column type="selection" ></el-table-column>
                            <el-table-column label="操作" prop="name"></el-table-column>
                            <el-table-column label="编号" prop="type"></el-table-column>
                            <el-table-column label="名称" prop="email"></el-table-column>
                            <el-table-column label="规格" prop="num"></el-table-column>
                            <el-table-column label="颜色" prop="num"></el-table-column>
                            <el-table-column label="所需数量" prop="num"></el-table-column>
                            <el-table-column label="损耗率" prop="num"></el-table-column>
                            <el-table-column label="单价(¥)" prop="num"></el-table-column>
                            <el-table-column label="费用(¥)" prop="num"></el-table-column>
                            <el-table-column label="物料仓库" prop="num"></el-table-column>
                            <el-table-column label="品牌" prop="num"></el-table-column>
                            <el-table-column label="备注" prop="datetime"></el-table-column>
                        </scTable>
                        </el-main>
                    </el-tab-pane>
                    <el-tab-pane label="2.生产加工">
                        <el-header>
                            <div>
                                <el-button type="primary">选择添加</el-button>
                                <el-button type="primary">单挑添加<el-icon class="el-icon--right"><el-icon-CaretBottom /></el-icon></el-button>
                                <el-button type="warning">删除</el-button>
                                <el-button type="primary">导入</el-button>
                                <el-button type="primary">导出</el-button>
                            </div>
                        </el-header>
                        <el-main>
                            <scTable ref="sontable" :apiObj="list.apiObj" row-key="id" stripe>
                            <el-table-column type="selection"></el-table-column>
                            <el-table-column label="操作" prop="name" ></el-table-column>
                            <el-table-column label="执行顺序" prop="type" ></el-table-column>
                            <el-table-column label="工序名称" prop="email"></el-table-column>
                            <el-table-column label="负责人" prop="num" ></el-table-column>
                            <el-table-column label="类别" prop="num" ></el-table-column>
                            <el-table-column label="加工厂商" prop="num" ></el-table-column>
                            <el-table-column label="计费方式" prop="num" ></el-table-column>
                            <el-table-column label="工价(¥)" prop="num" ></el-table-column>
                            <el-table-column label="参考用时" prop="num" ></el-table-column>
                            <el-table-column label="备注" prop="datetime"  sortable></el-table-column>
                        </scTable>
                        </el-main>
                    </el-tab-pane>
                    <el-tab-pane label="3.加工费用">
                        <el-header>
                            <div>
                                <el-button type="primary">添加</el-button>
                                <el-button type="warning">删除</el-button>
                            </div>
                        </el-header>
                        <el-main>
                            <scTable ref="sontable" :apiObj="list.apiObj" row-key="id" stripe>
                            <el-table-column type="selection" width="50"></el-table-column>
                            <el-table-column label="操作" prop="name"></el-table-column>
                            <el-table-column label="费用名称" prop="type"></el-table-column>
                            <el-table-column label="所需费用(¥)" prop="num"></el-table-column>
                            <el-table-column label="备注" prop="datetime"></el-table-column>
                        </scTable>
                        </el-main>
                    </el-tab-pane>
                </el-tabs>
				
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		name: 'listSon',
		data() {
			return {
				list: {
					apiObj: this.$API.basic.apply.lists
				},
                search:{
                    keyword:''
                }
			}
		},
		methods: {
			rowClick(row){
				var params = {
					groupId: row.id
				}
				this.$refs.sontable.reload(params)
			}
		}
	}
</script>

<style>
</style>
